<template>
  <div class='calendar-main'>
    <FullCalendar
      class='app-calendar'
      :options='calendarOptions'

    >
      <!-- <template v-slot:eventContent='arg'>
        <b>{{ arg.timeText }}</b>
        <i>{{ arg.event.title }}</i>
      </template> -->
    </FullCalendar>
  </div>
</template>
<script>
import FullCalendar from '@fullcalendar/vue'
import dayGridPlugin from '@fullcalendar/daygrid'
import timeGridPlugin from '@fullcalendar/timegrid'
import interactionPlugin from '@fullcalendar/interaction'
import { INITIAL_EVENTS, createEventId } from './event-utils'
export default {
  components: {
    FullCalendar // make the <FullCalendar> tag available
  },
  name: 'FullCalendarView',
  data: function() {
    return {
      calendarOptions: {
        contentHeight: 600,
        plugins: [
          dayGridPlugin,
          timeGridPlugin,
          interactionPlugin // needed for dateClick
        ],
        // headerToolbar: false,
        headerToolbar: {
          left: 'prev,next today',
          center: 'title',
          right: 'dayGridMonth,timeGridWeek,timeGridDay'
        },
        initialView: 'dayGridMonth',
        events: [
          {
            start: '2021-01-01T01:00:00',
            end: '2021-01-02T23:00:00',
            title: '111',
            color: 'yellow',
            textColor: 'black'
          }
        ],
        // initialEvents: INITIAL_EVENTS, // alternatively, use the `events` setting to fetch from a feed
        // editable: true,//控制日程计划移动
        selectable: true,
        selectMirror: true,
        dayMaxEvents: true,
        weekends: true,
        select: this.handleDateSelect,
        eventClick: this.handleEventClick,
        eventsSet: this.handleEvents,
        locale: 'zh-cn',
        firstDay: '1',
        weekNumberCalculation: 'ISO',
        // businessHours: {
        //   dow: [1, 2, 3, 4], // 周一 - 周四

        //   start: '10:00', // 上午10点开始
        //   end: '18:00' // 下午18点结束
        // },
        eventLimit: true, // for all non-agenda views
        views: {
          agenda: {
            eventLimit: 1 // adjust to 6 only for agendaWeek/agendaDay
          }
        }
        /* you can update a remote database when these fire:
        eventAdd:
        eventChange:
        eventRemove:
        */
      },
      currentEvents: []
    }
  },
  methods: {
    handleWeekendsToggle() {
      this.calendarOptions.weekends = !this.calendarOptions.weekends // update a property
    },
    handleDateSelect(selectInfo) {
      const title = prompt('Please enter a new title for your event')
      const calendarApi = selectInfo.view.calendar
      calendarApi.unselect() // clear date selection
      if (title) {
        calendarApi.addEvent({
          id: createEventId(),
          title,
          start: selectInfo.startStr,
          end: selectInfo.endStr,
          allDay: selectInfo.allDay
        })
      }
    },
    handleEventClick(clickInfo) {
      if (confirm(`Are you sure you want to delete the event '${clickInfo.event.title}'`)) {
        clickInfo.event.remove()
      }
    },
    handleEvents(events) {
      this.currentEvents = events
    }
  }
}
</script>
<style >
.calendar-main .fc-scrollgrid-sync-table,
.calendar-main .fc-col-header,
.calendar-main .fc-daygrid-body {
  width: 100% !important;
}
</style>
<style  scoped>
.app-calendar{
  /* height: 700px; */
  width: 100%;
}
.calendar-main{
  width: 100%;
  /* background-color: #fff;
  padding: 10px; */
}

/* h2 {
  margin: 0;
  font-size: 16px;
}
ul {
  margin: 0;
  padding: 0 0 0 1.5em;
}
li {
  margin: 1.5em 0;
  padding: 0;
}
b {
  margin-right: 3px;
}
.demo-app {
  display: flex;
  min-height: 100%;
  font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
  font-size: 14px;
}
.demo-app-main {
  flex-grow: 1;
  padding: 3em;
} */

</style>
